import { memo, useCallback, useState } from "react";
import { TabsWrapper } from "./style";
import { ScrollView } from "../../base-ui/scrollVoew";

export const SeactionTabs = memo(
    (props) => {
        const [ currentIndex, setIndex ]= useState(0);
        const { tabs = [],changeCityName} = props;
        const handelClick = useCallback((index) => {
            setIndex(index);
            changeCityName(index);
        })

        // tabs.push("a")
        // tabs.push("b")
        // tabs.push("c")
        // tabs.push("d")

        return (
            <TabsWrapper>
                <ScrollView>
                      {tabs?.map((item, index) => {
                    return (
                        <div className={`item ${index===currentIndex?'active':''}`} onClick={(e)=>handelClick(index)}  key={item}>
                            {item}
                       </div>
                   )   
                })}
                </ScrollView>
            </TabsWrapper>
        )
    }
)